<template>
  <Container class="storebase-info">
    <div class="container-header title title-center" slot="header">
      查看门店基础信息
      <Button
        size="large"
        class="fl btn-back"
        icon="ios-arrow-back"
        @click="jumpPrevPage"
      >返回</Button>
    </div>
    <div class="form-wrap bg-white">
        <Form :label-width="120" :rules="rule" ref="form" :model="form">
            <Row class="pr">
                <Col span="9">
                <FormItem label="门店名称" prop="phone">
                    <Input placeholder="请输入门店名称" v-model="form.storeDTO.storeName" :maxlength="60"/>
                </FormItem>
                </Col>
            </Row>
            <Row class="pr">
                <Col span="9">
                <FormItem label="手机号码" prop="name">
                    <p>{{form.storeDTO.storePhone}}</p>
                </FormItem>
                </Col>
            </Row>
            <Row class="pr">
                <Col span="9">
                <FormItem label="最后认证申请时间" prop="name">
                    <p>{{form.storeDTO.enabledDate}}</p>
                </FormItem>
                </Col>
            </Row>
            <Row class="pr">
                <Col span="8">
                <FormItem label="身份证正面">
                    <img class="w200" @click="previewImg(imgs.ownerIdcardPositiveImageUrl)" :src='rendImgUrl(imgs.ownerIdcardPositiveImageUrl+"_220w")' />
                </FormItem>
                </Col>
            </Row>
            <Row class="pr">
                <Col span="8">
                <FormItem label="身份证反面">
                    <img class="w200" @click="previewImg(imgs.ownerIdcardNegativeImageUrl)" :src='rendImgUrl(imgs.ownerIdcardNegativeImageUrl+"_220w")' />
                </FormItem>
                </Col>
            </Row>
            <Row class="pr">
                <Col span="8">
                <FormItem label="门头照">
                    <img class="w200" @click="previewImg(imgs.headImageUrl)" :src='rendImgUrl(imgs.headImageUrl+"_220w")' />
                </FormItem>
                </Col>
            </Row>
            <Row class="pr">
                <Col span="8">
                <FormItem label="店内照">
                    <div class='fleft'>
                      <img class='mr5 w200' @click="previewImg(imgs.hangerImageUrl)" :src='rendImgUrl(imgs.hangerImageUrl+"_220w")' />
                      <img class='mr5 w200' @click="previewImg(imgs.shelfImageUrl)" :src='rendImgUrl(imgs.shelfImageUrl+"_220w")' />
                      <img class='mr5 w200' @click="previewImg(imgs.stationImageUrl)" :src='rendImgUrl(imgs.stationImageUrl+"_220w")' />
                    </div>
                </FormItem>
                </Col>
            </Row>
            <Row class="pr">
                <Col span="8">
                <FormItem label="营业执照">
                    <img class="w200" @click="previewImg(imgs.businessLicenseImageUrl)" :src='imgs.businessLicenseImageUrl+"_220w"' />
                </FormItem>
                </Col>
            </Row>
            <Row class="pr">
                <Col span="9">
                <FormItem label="生日" prop="name">
                    <p>{{form.storeDTO.ownerBirthday}}</p>
                </FormItem>
                </Col>
            </Row>
            <Row class="pr">
                <Col span="9">
                <FormItem label="联系人姓名" prop="name">
                    <p>{{form.storeDTO.ownerName}}</p>
                </FormItem>
                </Col>
            </Row>
            <Row class="pr">
                <Col span="9">
                <FormItem label="社会信用代码" prop="name">
                    <p>{{form.storeDTO.businessLicenseNo}}</p>
                </FormItem>
                </Col>
            </Row>
            <Row class="pr">
                <Col span="9">
                <FormItem label="所在区域" prop="name">
                    <p>{{form.storeDTO.areaName}}</p>
                </FormItem>
                </Col>
            </Row>
            <Row class="pr">
                <Col span="9">
                <FormItem label="详细地址" prop="name">
                    <p>{{form.storeDTO.storeAddress}}</p>
                </FormItem>
                </Col>
            </Row>
            <Row class="pr">
                <Col span="9">
                <FormItem label="坐标" prop="name">
                    <p class="mb">{{form.storeDTO.storeLatitude}} - {{form.storeDTO.storeLongitude}}</p>
                    <div id='storePlaceMap'></div>
                </FormItem>
                </Col>
            </Row>
        </Form>
    </div>
    
  </Container>
</template>
<script>
  import PictureEditItem from "~/PictureEditItem";
  import { preFixPath } from '@/util'
  export default {
    props: {
    },
    components: {
      PictureEditItem,
    },
    computed: {
      imgs(){
        return this.form.storeDTO.storeExtDTO || {}
      }
    },
    mounted () {
      this.id = this.$route.query.id
      this.initData()
    },
    data() {
      return {
        form: {
          storeDTO: {
            storeExtDTO: {}
          }
        },
        store: {
          lng: 120.32944,
          lat: 30.293894,
          maker: null
        },
      }
    },
    methods: {
      async initData() {
        await this.getData()
        await this.loadMapIfNotExit().then(() => {
          this.initMap()
        })
      },
      getData() {
        if (!this.id) return
        return this.$ajaxGet(`/contract_store/page_store/detail/${this.id}`).then(res => {
          this.form.storeDTO = Object.assign(this.form.storeDTO, res)
          this.store.lng = res.storeLongitude
          this.store.lat = res.storeLatitude
        })
      },
      loadMapIfNotExit() {
        return new Promise((resolve) => {
          if (!window.AMap) {
            var url = 'https://webapi.amap.com/maps?v=1.4.15&key=fe7c4c62bb72d82db42e724fb23122d1&callback=onLoad'
            var jsapi = document.createElement('script')
            jsapi.charset = 'utf-8'
            jsapi.src = url
            document.head.appendChild(jsapi)
            window.onLoad = function () {
              resolve()
            }
          } else {
            resolve()
          }
        })
      },
      initMap() {
        this.map = new window.AMap.Map('storePlaceMap', {
          resizeEnable: false,
          scrollWheel: true,
          center: [this.store.lng, this.store.lat],
          zoom: 16
        })
        this.addMarker([this.store.lng, this.store.lat], null, '门店地址')
      },
      addMarker (point, imgurl, name) {
        let _this = this
        let p = {
          position: point
        }
        if (imgurl) {
          p.icon = imgurl
        }
        let mk = new window.AMap.Marker(p)
        this.map.add(mk)
        mk.setLabel({
          offset: new window.AMap.Pixel(-6, -22),
          content: name
        })
        mk.on('click', (e) => {
          _this.map.setZoomAndCenter(15, [e.lnglat.lng, e.lnglat.lat])
        })
      },
      jumpPrevPage() {
        this.$router.back()
      },
      rendImgUrl(url) {
        if(!url) return ''
        return url.indexOf('http') > -1 ? url : preFixPath + url
      },
      previewImg(url) {
        this.$vueImgPreview(url)
      }
    },
  }
</script>
